<template>
	<a-drawer title="编辑专业招生计划"  :width="windowWidth" placement="right" :closable="false" @close="onClose"
	 :visible="professionalEditVisiable" style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
		<a-form :form="form">
			<a-form-item label='院系' v-bind="formItemLayout">
				<a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zsyxm',{ rules: [{ required: true, message: '请选择院系' }] }]" @change="yxChange" disabled>
					<a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label='招生年度' v-bind="formItemLayout">
				<a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zsnj',{ rules: [{ required: true, message: '请选择学年' }] }]">
					<a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label='专业' v-bind="formItemLayout">
				<a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zszym',{ rules: [{ required: true, message: '请选择专业' }] }]" @change="zyChange">
					<a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{ i.zyh+'-'+i.zymc }}</a-select-option>
				</a-select>
			</a-form-item>
      <a-form-item label='培养模式' v-bind="formItemLayout">
        <a-select :allowClear="true" showSearch optionFilterProp="children"  v-decorator="['pymsm',{ rules: [{ required: true, message: '请选择培养模式' }] }]" disabled>
          <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.pymsm">{{ i.pymsmc }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='本专业计划数' v-bind="formItemLayout">
        <a-input   v-decorator="['zszjhrs',{ rules: [{ required: true, message: '请输入本专业计划数' }] }]" />
      </a-form-item>
	  <a-form-item label='备注' style="margin-top:20px">
        <a-textarea placeholder="请输入..." v-decorator="['note',{initialValue:postParams.note}]" />
      </a-form-item>
		</a-form>
		<div class="drawer-bootom-button">
			<a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
			<a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
	// import moment from 'moment'
	import {
		STable
	} from '~'
	import {
		mapState
	} from 'vuex'

	const formItemLayout = {
		labelCol: {
			span: 5
		},
		wrapperCol: {
			span: 18
		}
	}

	const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
	export default {
		name: 'ProfessionalEdit',
		props: {
			info: {
				default: () => ({
					hzfs: '',
					zjh: '',
					fzyxwjh: '',
					zyxwjh: ''
				})
			},
			professionalEditVisiable: {
				default: false
			},
			detailId: {
				default: ''
			}
		},
		components: {
			STable
		},
		data() {
			return {
				formItemLayout,
				windowWidth:"650",
				winWidth:"650",
				loading: false,
				data: [],
				postParams: {
					hzfs: 'yx'
				},
				// 表头
				columns: [{
						title: '',
						dataIndex: 'column'
					},
					{
						title: '计划',
						scopedSlots: {
							customRender: 'plan'
						}
					}
				],
				selectMenu: {
					yx: [] // 院系
				},
				selectId: ''
			}
		},
		computed: {
			...mapState({
				systemInfo: state => state.app.systemInfo,
				TYPE0126: state => state.app['TYPE0126'] // 年级
			})
		},
		watch: {
			winWidth(val){
				let that = this
				setTimeout(function(){
					if(val<650){
						that.windowWidth=val;
					}else{
						that.windowWidth="650"
					}
				},400)
			},
			info(val) {
				// console.log(val)
				this.postParams = {
					zsyxm: val.zsyxm,
					zszym: val.zszym,
					zsnj: val.zsnj,
					pymsm:val.pymsm,
					zszjhrs:val.zszjhrs,
					note:val.note
				}
				this.form.setFieldsValue({'zsyxm':val.zsyxm})
				this.form.setFieldsValue({'zszym':val.zszym})
				this.form.setFieldsValue({'zsnj':val.zsnj})
				this.form.setFieldsValue({'pymsm':val.pymsm})
				this.form.setFieldsValue({'zszjhrs':val.zszjhrs})
				this.form.setFieldsValue({'note':val.note})
				this.getProfessionList(val.zsyxm)
				this.data = [{
					column: '总计划',
					plan: val.zszjhrs,
					distribution: 1,
					key: 'zszjhrs'
				}]
			}
		},
		mounted() {
			console.log(this.detailId)
			this.initSelectMenu()
			selectArr.forEach(v => {
				this.$store.dispatch('app/setDictionary', v)
			})
			const that = this
			that.windowWidth = document.body.clientWidth>650?650:document.body.clientWidth
			window.onresize=()=>{
				return (()=>{
					window.screenWidth = document.body.clientWidth
					that.winWidth =window.screenWidth
				})()
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this)
		},
		methods: {
			initSelectMenu() {
				let allRequest = [
					this.$api.base.collegeAll()
				]
				Promise.all(allRequest).then(res => {
					this.selectMenu = {
						yx: res[0].data
					}
				})
			},
			reset() {
				this.data = [{
					column: '总计划',
					plan: '',
					key: 'zjh'
				}]
			},
			// 选择院系
			yxChange(code) {
				console.log(code)
				this.form.setFieldsValue({'zszym':''})
				this.$set(this.selectMenu,'zy','')
				if(code){
				this.getProfessionList(code)
				}
			},
      zyChange(code){
        // console.log(this.form.getFieldDecorator().zszym)
        this.selectMenu.zy.forEach(item =>{
          if(code == item.zyh){
            this.form.setFieldsValue({'pymsm':item.pymsm})
          }
        })
      },
			getProfessionList(code){
				var yx = this.selectMenu.yx
				this.selectMenu = {}
				this.$api.base.majorAll({
					lsdwh: code
				}).then(res => {
					if (res.data) {
						this.selectMenu = {
							yx: yx,
							zy: res.data
						}
					}
				})
			},
			// 选择招生年度
			zsndChange() {

			},
			// 关闭
			onClose() {
				this.reset()
				this.$emit('close')
			},
			// 保存
			handleSubmit() {
				 this.form.validateFields( (err,values) => {
					if(err){
					this.$message.error("请选择必填项")
					}else{
				let paramms = Object.assign({
					id: this.info.id,

				},this.form.getFieldsValue())
				// console.log(paramms)
				this.$api.doctorRecruit.professionalUpdate(paramms).then(res => {
					this.$emit('success')
				}).finally(() => {
					this.loadingBtn = false
				})
					}
				 })
			},
			// 修改各计划人数人数
			handleChange(key, dataIndex, value) {
				const dataSource = [...this.data]
				const target = dataSource.find(item => item.key === key)
				if (target) {
					target[dataIndex] = value
					this.data = dataSource
				}
			}
		}
	}
</script>
